<template>
    <div id="sign_wrap">
        <el-button :type="is_regist" class="regist" @click="changeType(1)">注册</el-button>
        <el-button :type="is_login" class="login" @click="changeType(2)">登录</el-button>
        <div v-if="show_regist">
            <span>头像：</span>
            <el-upload class="avatar-uploader" action="http://49.235.28.88:3000/users/upload_avatar" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" v-loading="loading2" element-loading-text="头像上传中" name="avatar">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        <el-input v-model="account" placeholder="账号"></el-input>
        <el-input v-model="password" placeholder="密码" type="password"></el-input>

        <div v-if="is_show">
            <el-input v-model="username" placeholder="用户名"></el-input>
            <el-input v-model="comment" placeholder="用户简介(选填)"></el-input>
            <el-input v-model="recommend_code" placeholder="推荐码(选填)"></el-input>
            <el-input v-model="verify_code" class="verify_input" placeholder="验证码"></el-input>
            <el-button @click="verifycode" class="verify_btn" type="primary" v-if="!verify_show">获取验证码</el-button>
            <el-button class="verify_btn" type="primary" v-if="verify_show">{{count}}</el-button>
        </div>

        <el-button @click="signup" type="primary" v-if="show_regist" class="bottom_regist">注册</el-button>
        <el-button type="primary" v-if="show_login" class="bottom_login" @click="signin">登录</el-button>
    </div>
</template>

<script>
    import querystring from 'querystring';
    export default {
        name: 'signin',
        data() {
            return {
                account: '',
                password: '',
                username: '',
                comment: '',
                recommend_code: '',
                is_regist: 'primary',
                is_login: '',
                is_show: true,
                show_regist: true,
                show_login: false,
                imageUrl: '',
                loading2: false,
                avatar: '',
                verify_show: false,
                count: '',
                timer: null,
                verify_code: ''
            }
        },
        mounted: function() {

        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.loading2 = false;
                this.imageUrl = URL.createObjectURL(file.raw);
                this.avatar = res.payload.avatar_path;
            },
            beforeAvatarUpload(file) {
                this.loading2 = true;
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.loading2 = false;
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.loading2 = false;
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }

                return isJPG && isLt2M;
            },
            changeType: function(type) {
                if (type == 2) {
                    this.is_regist = "";
                    this.is_login = "primary";
                    this.is_show = false;
                    this.show_login = true;
                    this.show_regist = false;
                } else if (type == 1) {
                    this.is_regist = "primary";
                    this.is_login = "";
                    this.is_show = true;
                    this.show_regist = true;
                    this.show_login = false;
                }
            },
            signup: function() {
                var myreg = /^(1)[0-9]{10}$/;
                if (this.account.length != 11 || !myreg.test(this.account)) {
                    this.$message.error('用户账号必须为手机号!');
                    return;
                }
                if (this.password.length < 8) {
                    this.$message.error('密码不能为空或小于8个字符!');
                    return;
                }
                if (this.username.length < 3) {
                    this.$message.error('用户名需大于3个字符!');
                    return;
                }

                var user = {
                    account: this.account,
                    password: this.password,
                    username: this.username,
                    app_sid: 'NYL',
                    comment: this.comment,
                    recommend_code: this.recommend_code,
                    avatar: this.avatar,
                    verifycode: this.verify_code
                }

                var url = 'http://49.235.28.88:3000/users/regist';
                var _this = this;

                this.$req({
                    method: "post",
                    url: url,
                    data: user
                }).then(function(res) {
                    if (res.data.status == 400) {
                        _this.$message.error(res.data.err);
                    } else if (res.data.status == 420) {
                        _this.$message.error(res.data.err.msg);
                    } else {
                        _this.$message.success('注册成功!');
                        var userInfo = res.data.payload;
                        localStorage.setItem('user', JSON.stringify(userInfo));
                        _this.$router.push('/admin/articleList');
                    }
                }).catch(function(e) {
                    _this.$message.error('服务器可能存在异常!');
                });
            },
            signin: function() {
                var _this = this;
                var myreg = /^(1)[0-9]{10}$/;
                if (this.account.length != 11 || !myreg.test(this.account)) {
                    this.$message.error('用户账号必须为手机号!');
                    return;
                }
                if (this.password.length < 8) {
                    this.$message.error('密码不能为空或小于8个字符!');
                    return;
                }

                var user = {
                    account: this.account,
                    password: this.password,
                    app_sid: 'NYL'
                }

                var url = 'http://49.235.28.88:3000/users/login';

                this.$req({
                    method: "post",
                    url: url,
                    data: user,
                }).then(function(res) {
                    if (res.data.status == 400) {
                        _this.$message.error(res.data.err);
                    } else if (res.data.status == 420) {
                        _this.$message.error(res.data.err.msg);
                    } else {
                        _this.$message.success('登录成功!');
                        var userInfo = res.data.payload;
                        localStorage.setItem('user', JSON.stringify(userInfo));
                        _this.$router.push('/admin/articleList');
                    }
                }).catch(function(e) {
                    _this.$message.error('服务器可能存在异常!');
                });
            },
            verifycode: function() {
                var _this = this;
                var myreg = /^(1)[0-9]{10}$/;
                if (this.account.length != 11 || !myreg.test(this.account)) {
                    this.$message.error('用户账号必须为手机号!');
                    return;
                }

                var user = {
                    account: this.account,
                    app_sid: 'NYL',
                    type: 0
                }

                var url = 'http://49.235.28.88:3000/users/apply_code';

                this.$req({
                    method: "post",
                    url: url,
                    data: user,
                }).then(function(res) {
                    if (res.data.status == 400) {
                        _this.$message.error(res.data.err);
                    } else if (res.data.status == 420) {
                        _this.$message.error(res.data.err);
                    } else {
                        _this.$message.success(res.data.payload);
                        _this.verify_show = true;
                        const time_count = 60;
                        if (!_this.timer) {
                            _this.count = time_count;
                            _this.timer = setInterval(() => {
                                if (_this.count > 0 && _this.count <= time_count) {
                                    _this.count--;
                                } else {
                                    _this.verify_show = false;
                                    clearInterval(_this.timer);
                                    _this.timer = null;
                                }
                            }, 1000);
                        }
                    }
                }).catch(function(e) {
                    _this.$message.error(res.data.err);
                });
            }
        }
    }
</script>

<style scoped>
    .verify_input {
        width: 65%;
        float: left;
    }

    .verify_btn {
        width: 30%;
        float: right;
    }

    span {
        float: left;
        color: gray;
        font-size: 18px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 140px;
        height: 140px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 140px;
        height: 140px;
        display: block;
        background-size: cover;
        border-radius: 100px;
    }

    #sign_wrap {
        width: 450px;
        margin: 100px auto;

    }

    #sign_wrap div {
        padding-bottom: 30px;
    }

    .regist {
        width: 45%;
        float: left;
        margin-bottom: 20px;
        color: black;
    }

    .login {
        width: 45%;
        float: right;
        margin-bottom: 20px;
        color: black;
    }

    .bottom_regist {
        width: 100%;
    }

    .bottom_login {
        width: 100%;
    }
</style>
